<template>
  <view v-if="goods_info.goods_name">
    <swiper class="lunbo" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" autoplay="true" circular="true">
      <swiper-item v-for="(item, index) in goods_info.pics" :key="index" @click="quickLook(index)"><img :src="item.pics_big" alt="" srcset="" /></swiper-item>
    </swiper>
    <view class="good_title">
      <view class="price">¥{{ goods_info.goods_price }}</view>
      <view class="goodName">
        <view class="leftName">{{ goods_info.goods_name }}</view>
        <view class="rightName">
          <uni-icons type="star" size="20"></uni-icons>
          收藏
        </view>
      </view>
      <view class="transform">快递：免运费</view>
    </view>
    <rich-text :nodes="goods_info.goods_introduce"></rich-text>
    <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_info: '',
      options: [
        {
          icon: 'shop',
          text: '店铺',
          info: 2,
          infoBackgroundColor: '#007aff',
          infoColor: 'red'
        },
        {
          icon: 'cart',
          text: '购物车',
          info: 2
        }
      ],
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#ff0000',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: '#ffa200',
          color: '#fff'
        }
      ]
    }
  },
  methods: {
    async getgoods(goods_id) {
      const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
      console.log(res)
      if (res.meta.status !== 200) {
        return uni.$showMsg()
      }
      res.message.goods_introduce.replace(/<img /g, '<img style="display:block;"') //商品详情图片中间留空白间隔
      this.goods_info = res.message
    },
    // 预览图片
    quickLook(index) {
      uni.previewImage({
        current: index,
        urls: this.goods_info.pics.map(item => item.pics_big),
        loop: true
      })
    },
    // 导航栏
    onClick(e) {
      if (e.content.text === '店铺') {
        uni.navigateTo({
          url: ''
        })
      } else if (e.content.text === '购物车') {
        uni.switchTab({
          url: '/pages/cart/cart'
        })
      }
    },
    buttonClick(e) {
      console.log(e)
      this.options[1].info++
    }
  },
  onLoad(options) {
    const goods_id = options.goods_id
    this.getgoods(goods_id)
  }
}
</script>

<style lang="scss">
.lunbo {
  height: 750rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
.good_title {
  margin: 20rpx 0;
  padding: 0 20rpx;
  .price {
    padding: 20rpx 0;
    color: #c00000;
    font-size: 40rpx;
  }
  .goodName {
    display: flex;
    margin-bottom: 20rpx;
    justify-content: space-between;
    .leftName {
      width: 85%;
      font-size: 28rpx;
      border-right: 2rpx solid #ccc;
    }
    .rightName {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 10rpx;
      font-size: 30rpx;
    }
  }
  .transform {
    font-size: 30rpx;
    color: #afafaf;
    margin-bottom: 20rpx;
  }
}
rich-text {
  padding-bottom: 60rpx;
}
uni-goods-nav {
  position: fixed;
  bottom: 0rpx;
  left: 0;
  width: 100%;
}
</style>
